<template>
  <el-row type="flex" :class="`classroom ${roomType.path}`">
    <Nav :roomInfo="roomName"></Nav>
    <Course></Course>
    <router-view />
  </el-row>
</template>

<script>
import { Message } from 'element-ui'
import Nav from './components/nav.vue'
import Course from './components/course.vue'
import { roomStore } from './utils/room'
import { eduApi } from './utils/edu-api'
import { mapState } from 'vuex'
const roomTypes = [
  { value: 0, path: 'one-to-one' },
  { value: 1, path: 'small-class' },
  { value: 2, path: 'big-class' }
]
export default {
  components: {
    Nav,
    Course
  },
  data() {
    return {
      roomStore: roomStore,
      roomName: '',
      type: { 1: 2, 2: 1, 3: 0 }, // 直播类型对应声网
      isSmallClass: Boolean(this.$route.path.match(/small-class/))
    }
  },
  computed: {
    ...mapState('user', {
      nickName: state => state.info.nick_name
    }),
    ...mapState({
      getCurrentPlayItem: state => state.course.currentPlayItem
    }),
    roomType() {
      return roomTypes[this.roomStore.state.course.roomType]
    },
    roomInfo() {
      return {
        uid: this.roomStore.state.me.uid,
        rid: this.roomStore.state.course.rid,
        appID: this.roomStore.state.appID
      }
    },
    canPublish() {
      return this.roomStore.state.me.coVideo
    },
    applyUser() {
      return this.roomStore.state.applyUser
    }
  },
  watch: {
    canPublish(newVal) {
      if (newVal === 1) {
        const mediaDevice = this.roomStore.state.mediaDevice
        const streamSpec = {
          streamID: this.roomStore.state.me.uid,
          video: true,
          audio: true,
          mirror: false,
          screen: false,
          microphoneId: mediaDevice.microphoneId,
          cameraId: mediaDevice.cameraId,
          audioOutput: {
            volume: mediaDevice.speakerVolume,
            deviceId: mediaDevice.speakerId
          }
        }
        let canPublish = newVal
        if (canPublish) {
          this.roomStore.rtcClient.publishLocalStream(streamSpec)
        }
      } else {
        if (this.$route.path.match(/big-class/) || this.roomStore.state.me.role == 2) {
          if (!this.roomStore.rtcClient._published) return
          this.roomStore.rtcClient.unpublishLocalStream()
        }
      }
    },
    'roomStore.state': {
      deep: true,
      handler(n) {
        const room = this.roomStore.state
        sessionStorage.setItem(
          'agora_room',
          JSON.stringify({
            me: room.me,
            course: room.course,
            mediaDevice: room.mediaDevice,
            applyUser: room.applyUser
          })
        )
      }
    }
  },
  async created() {
    const res = await this.roomStore.getLiveRoomInfo(this.getCurrentPlayItem.id)
    if (res.code == 0) {
      Message({
        showClose: true,
        message: res.msg,
        type: 'warning',
        duration: 10000
      })
    } else {
      const { course_live_type, identity, room_no, section_name, user_id } = res
      this.$store.commit('live/roomId', room_no)
      this.roomName = section_name
      this.login({
        userName: this.nickName,
        roomName: room_no,
        role: identity === 1 ? 1 : 2,
        type: this.type[course_live_type],
        uuid: user_id
      })
      // 用户添加学习记录
      /* if (identity == 0) {
        this.handleAddLearning()
      } */
    }
  },
  methods: {
    async login(payload) {
      this.$store.dispatch('live/setLoading', true)
      let room = await this.roomStore.LoginToRoom(payload)
      eduApi.getAgoraNetless() // 获取白板的oss配置
      sessionStorage.setItem(
        'agora_room',
        JSON.stringify({
          me: room.me,
          course: room.course,
          mediaDevice: room.mediaDevice,
          applyUser: room.applyUser
        })
      )
      this.$store.dispatch('live/setLoading', false)
      await this.roomStore.joinChannel({
        uid: room.me.uid,
        channel: room.course.rid,
        token: room.me.rtcToken,
        dual: this.isSmallClass,
        appId: room.appID
      })
    },
    // 添加学习记录
    handleAddLearning() {
      this.$api.createCourseRecord({
        course_id: this.getCurrentPlayItem.course_id,
        section_id: this.getCurrentPlayItem.id,
        current_time: 0
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import './big-class.scss';
</style>
